<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读者详情</title>
    <link rel="stylesheet" type="text/css" href="/site/css/styles.css">
</head>
<body>
<div id="app">
    <app-header></app-header>
    <app-sidebar></app-sidebar>

    <div class="main-content">
        <h2>{{ reader.id ? '编辑读者' : '添加读者' }}</h2>
        <form @submit.prevent="submitForm">
            <input type="hidden" v-model="reader.id">

            <div class="form-group">
                <label for="readerId">ID:</label>
                <input type="text" id="readerId" v-model="reader.readerId" required>
            </div>

            <div class="form-group">
                <label for="name">姓名:</label>
                <input type="text" id="name" v-model="reader.name" required>
            </div>
            <div class="form-group">
                <label for="gender">性别:</label>
                <input type="text" id="gender" v-model="reader.gender" required>
            </div>
            <div class="form-group">
                <label for="phone">联系电话:</label>
                <input type="text" id="phone" v-model="reader.phone" required>
            </div>
            <div class="form-group">
                <label for="email">电子邮箱:</label>
                <input type="text" id="email" v-model="reader.email" required>
            </div>



            <div class="form-group submit">
                <input type="submit" :value="reader.readerId ? '更新读者' : '添加读者'">
            </div>
        </form>
    </div>
</div>
<!-- 引入 Vue -->
<script src="/assets/vue/vue3.min.js"></script>
<!-- 引入 Axios -->
<script src="/assets/axios/axios.min.js"></script>
<!-- 引入组件 -->
<script src="/site/js/component/header.js"></script>
<script src="/site/js/component/sidebar.js"></script>
<script>
    const {reactive, onMounted} = Vue;

    const app = {
        // 使用局部注册的方式注册组件
        components: {
            AppHeader,
            AppSidebar
        },

        setup() {
            // 定义响应式数据
            const reader = reactive({
                language: '中文',
                genre: '文学',
                location: '理科1室',
                status: '在馆',
            });

            // 获取读者详情的方法
            const fetchreaderById = (id) => {
                axios.get(`/api/reader/${id}`)
                    .then(response => {
                        if (response.data.code === 200) {
                            Object.assign(reader, response.data.data); // 将返回的数据合并到 reader 中
                        }
                    })
                    .catch(error => {
                        console.error('获取读者详情失败:', error);
                        alert('获取读者详情失败，请稍后再试');
                    });
            }

            // 提交表单的方法
            const submitForm = () => {
                if (reader.id) {
                    // 更新读者
                    axios.put('/api/reader/', reader)
                        .then(response => {
                            if (response.data.code === 200) {
                                alert('更新读者成功');
                                window.location.href = `/reader/list`;
                            } else {
                                alert('更新读者失败: ' + response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('更新读者失败:', error);
                        });
                } else {
                    // 添加读者
                    axios.post('/api/reader/', reader)
                        .then(response => {
                            if (response.data.code === 200) {
                                alert('添加读者成功');
                                window.location.href = `/reader/list`;
                            } else {
                                alert('添加读者失败: ' + response.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('添加读者失败:', error);
                        });
                }
            }

            // 获取 URL 中的 ID 并加载读者详情
            onMounted(() => {
                const id = new URLSearchParams(window.location.search).get('id');
                if (id) {
                    fetchreaderById(id);
                }
            });

            // 返回模板中需要的数据和方法
            return {reader, submitForm};
        }
    };

    Vue.createApp(app).mount('#app');
</script>
</body>
</html>